<template>
  <div class="scroll">
    <example-card title="按钮" url="http://element.eleme.io/#/zh-CN/component/button">
      <div>
        <el-button>默认按钮</el-button>
        <el-button type="primary">主要按钮</el-button>
        <el-button type="success">成功按钮</el-button>
        <el-button type="info">信息按钮</el-button>
        <el-button type="warning">警告按钮</el-button>
        <el-button type="danger">危险按钮</el-button>
      </div>
      <div>
        <el-button plain>朴素按钮</el-button>
        <el-button type="primary" plain>主要按钮</el-button>
        <el-button type="success" plain>成功按钮</el-button>
        <el-button type="info" plain>信息按钮</el-button>
        <el-button type="warning" plain>警告按钮</el-button>
        <el-button type="danger" plain>危险按钮</el-button>
      </div>
      <div>
        <el-button round>圆形按钮</el-button>
        <el-button type="primary" round>主要按钮</el-button>
        <el-button type="success" round>成功按钮</el-button>
        <el-button type="info" round>信息按钮</el-button>
        <el-button type="warning" round>警告按钮</el-button>
        <el-button type="danger" round>危险按钮</el-button>
      </div>
      <div>
        <el-button type="text">文字按钮</el-button>
        <el-button type="text" disabled>文字按钮</el-button>
      </div>
      <div>
        图标按钮
        <el-button type="primary" icon="el-icon-share" />
        <el-button type="primary" icon="el-icon-search">搜索</el-button>
        <el-button type="primary">上传<i class="el-icon-upload el-icon--right"></i></el-button>
      </div>
      <div>
        按钮组
        <el-button-group>
          <el-button type="primary" icon="el-icon-arrow-left">上一页</el-button>
          <el-button type="primary">下一页<i class="el-icon-arrow-right el-icon--right"></i></el-button>
        </el-button-group>
      </div>
      <div>
        <el-button type="primary" :loading="true">加载中</el-button>
      </div>
      <div>
        <el-button>默认按钮</el-button>
        <el-button size="medium">中等按钮</el-button>
        <el-button size="small">小型按钮</el-button>
        <el-button size="mini">超小按钮</el-button>
      </div>
    </example-card>
    <example-card title="单选框" url="http://element.eleme.io/#/zh-CN/component/radio">
      <div>
        <el-radio v-model="radio" label="1">备选项1</el-radio>
        <el-radio v-model="radio" label="2">备选项2</el-radio>
        <el-radio disabled v-model="radio" label="3">禁选项</el-radio>
      </div>
      <div>
        <el-radio-group v-model="radioGroup">
          <el-radio-button label="上海" />
          <el-radio-button label="北京" />
          <el-radio-button label="广州" />
          <el-radio-button label="深圳" />
        </el-radio-group>
      </div>
    </example-card>
    <example-card title="多选框" url="http://element.eleme.io/#/zh-CN/component/checkbox">
      <div>
        <el-checkbox v-model="checked">选项</el-checkbox>
        {{checked}}
      </div>
      <div>
        <el-checkbox-group v-model="checkList">
          <el-checkbox :label="1">复选框 A</el-checkbox>
          <el-checkbox :label="2">复选框 B</el-checkbox>
          <el-checkbox :label="3" disabled>复选框 C</el-checkbox>
        </el-checkbox-group>
        {{checkList}}
      </div>
      <div>
        <el-checkbox-group v-model="checkboxGroup">
          <el-checkbox-button :label="11">北京</el-checkbox-button>
          <el-checkbox-button :label="22">上海</el-checkbox-button>
          <el-checkbox-button :label="33">重庆</el-checkbox-button>
        </el-checkbox-group>
        {{checkboxGroup}}
      </div>
    </example-card>
    <example-card title="输入框" url="http://element.eleme.io/#/zh-CN/component/input">
      <div>
        <el-checkbox v-model="inputDisabled">禁用/启用输入框</el-checkbox>
        <el-input
            v-model="input"
            placeholder="请输入内容"
            :disabled="inputDisabled"
            clearable
            prefix-icon="el-icon-fa-user"
            suffix-icon="el-icon-fa-edit"
        />
      </div>
      <div>
        <el-input
            type="textarea"
            :rows="3"
            placeholder="请输入内容"
            v-model="textarea"
        />
      </div>
      <div>
        <el-input placeholder="请输入内容" v-model="input2">
          <template slot="prepend">Http://</template>
        </el-input>
      </div>
      <div>
        <el-input placeholder="请输入内容" v-model="input3" class="input-with-select">
          <el-select v-model="prependSelect" slot="prepend" placeholder="请选择" style="width: 130px;">
            <el-option label="餐厅名" value="1" />
            <el-option label="订单号" value="2" />
            <el-option label="用户电话" value="3" />
          </el-select>
          <el-button slot="append" icon="el-icon-search" />
        </el-input>
      </div>
      <div>
        <el-autocomplete
            v-model="autocomplete"
            :fetch-suggestions="querySearch"
            placeholder="请输入内容"
            @select="handleSelect"
        />
      </div>
    </example-card>
    <example-card title="数字输入框" url="http://element.eleme.io/#/zh-CN/component/input-number">
      <div>
        <el-input-number v-model="num1" :min="1" :max="10" label="描述文字" />
      </div>
      <div>
        <el-input-number v-model="num2" controls-position="right" :min="0" :max="10" :step="2" />
      </div>
    </example-card>
    <example-card title="下拉选择" url="http://element.eleme.io/#/zh-CN/component/select">
      <div>
        <el-select v-model="select1" placeholder="请选择" clearable filterable>
          <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
              :disabled="item.disabled"
          >
          </el-option>
        </el-select>
      </div>
      <div>
        <el-select v-model="select2" multiple placeholder="请选择">
          <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
              :disabled="item.disabled"
          >
          </el-option>
        </el-select>
      </div>
    </example-card>
    <example-card title="Switch" url="http://element.eleme.io/#/zh-CN/component/switch">
      <div>
        <el-switch v-model="switch1" />
        <el-switch v-model="switch2" disabled />
      </div>
    </example-card>
    <example-card title="滑块" url="http://element.eleme.io/#/zh-CN/component/slider">
      <div>
        <el-slider v-model="slider" />
      </div>
    </example-card>
  </div>
</template>

<script>
  export default {
    name: "ui_base_view",
    data() {
      return {
        radio: undefined,
        radioGroup: "北京",
        checked: false,
        checkList: [1],
        checkboxGroup: [22],
        input: "",
        inputDisabled: false,
        textarea: "",
        input2: "",
        input3: "",
        prependSelect: "",
        autocomplete: "",
        restaurants: [],
        num1: 1,
        num2: 0,
        select1: undefined,
        select2: undefined,
        options: [
          { label: "选项一", value: 1, disabled: false },
          { label: "选项二", value: 2, disabled: true },
          { label: "选项三", value: 3, disabled: false }
        ],
        switch1: true,
        switch2: true,
        slider: 20,
      };
    },
    mounted() {
      this.restaurants = this.loadAll();
    },
    methods: {
      querySearch(queryString, cb) {
        const restaurants = this.restaurants;
        const results = queryString ? restaurants.filter(this.createFilter(queryString)) : restaurants;
        setTimeout(() => {
          // 调用 callback 返回建议列表的数据
          cb(results);
        }, 500);
      },
      createFilter(queryString) {
        return (restaurant) => {
          return (restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0);
        };
      },
      handleSelect(item) {
        console.log(item);
      },
      loadAll() {
        return [
          { "value": "三全鲜食（北新泾店）", "address": "长宁区新渔路144号" },
          { "value": "Hot honey 首尔炸鸡（仙霞路）", "address": "上海市长宁区淞虹路661号" },
          { "value": "新旺角茶餐厅", "address": "上海市普陀区真北路988号创邑金沙谷6号楼113" },
          { "value": "泷千家(天山西路店)", "address": "天山西路438号" },
          { "value": "贡茶", "address": "上海市长宁区金钟路633号" },
          { "value": "星移浓缩咖啡", "address": "上海市嘉定区新郁路817号" }
        ];
      }
    }
  };
</script>

<style scoped lang="less">
  .scroll .el-switch + .el-switch {
    margin-left: 20px;
  }
</style>
